【前端】CSS基础

2023-12-14 03:32| 来源: 网络整理| 查看: 265

W3C标准：结构：HTML描述页面的结构表现：CSS控制页面中元素的样式行为：JavaScript相应用户操作

相关笔记： HTML基础 CSS基本语法 CSS基础-layout CSS基础-float CSS基础——position

字体样式

color 用来设置字体的颜色

font-size 字体的大小相关单位： em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size

font-family 字体族（字体的格式）可选值： serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体可以同时指定多个字体，多个字体间用逗号隔开；如果一个字体由多个单词组成，用单引号；字体生效时，优先使用第一个，第一个无法使用则使用下一个。例：font-family: ‘Courier New’, Courier, monospace;

font-face 可以将服务器中的字体直接提供给用户使用（少用） font-family：指定字体的名字 src： - url服务器中字体的路径（为了避免格式不支持，可以添加多个路径，用逗号隔开） - format 指定格式（多此一举），为了避免出错，但一般不会问题： 1、加载速度 2、版权 3、字体格式例：

@font-face{ font-family: 'my font'; src: url(./font/ZCOOLQingKeHuangYou-Regular.ttf) format("truetype"); } 图标字体

在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式引入。

font awesome 使用步骤（版权清晰，有免费有付费） 1、下载 http://fontawesome.com/ 2、解压 3、将css和webfonts移动到项目中（必须放到同一个文件夹） 4、用link将all.css引入到网页中 5、使用图标字体

直接通过类名使用（一般有fas和fab两种，不行再尝试）例： class"fas fa-bell" class"fab fa-accessible-icon" 通过伪元素设置（加编码） 1、找到要设置图标的元素用before或after 2、在content中设置字体的编码 3、设置字体的样式 - fab： font-family: ‘Font Awesome 5 Brands’; - fas： font-family: ‘Font Awesome 5 Free’; font-weight: 900; 例： li::before{ content: '\f06a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: tomato; margin-right: 10px; } 通过实体使用（加编码）格式：&#x图标编码; 例： 

阿里字体库iconfont 使用步骤（版权不清晰） 1、登录网站https://www.iconfont.cn/ 2、选好加入购物车 3、添加至项目 4、打开项目，下载至本地 5、将文件夹放进来（除了demo.css和demo_index.html） 6、link调用css文件 (图标字体只能是黑白，彩色的只能用图片)

直接用 iconfont 里的css文件（加名称）例：通过伪元素设置（加编码） 1、找到要设置图标的元素通过before或after选中 2、在content中设置字体的编码 3、设置字体的样式例： p::before{ content: '\e627'; font-family: 'iconfont'; font-size: 100px; } 通过实体使用（加编码）格式：&#x图标编码; 例： 

（font awesome和iconfont在css里的用法其实是一样的，只是矢量图片获取方法不同）

行高（line height)

可以用来设置行间距和垂直居中

行高指的是文字占有的实际高度(默认是1.33)

通过line-height来设置行高 1、直接指定一个大小（px em） 2、直接设置一个整数（行高将是字体的指定倍数）

行高经常还用来设置文字的行间距行间距 = 行高 - 字体大小

字体框：字体存在的格子，设置font-size实际上就是在设置字体框的大小

行高会在字体框上下平均分配，可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。

字体的简写属性

font 可以设置字体相关的所有属性语法：font: 字体大小/行高字体族行高可以省略不写，如果不写使用默认值加粗和斜体可以加在前面，如果不写使用默认值字体大小的位置是倒数第二个、字体族的位置是倒数第一个（顺序不能变）

font-weight 字重字体的加粗可选值： normal 默认值不加粗 bold 加粗 100-900 九个级别（没什么用）

font-style 字体的风格可选值： normal 正常 italic 斜体

例：font: bold italic 50px/2 微软雅黑;

文本的水平和垂直对齐

text-align 文本的水平对齐可选值： left 左对齐 right 右对齐 center 居中对齐 justify 两端对齐

vertical-align 元素垂直对齐可选值： baseline 默认值基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐(与x的中间居中) (如果是图片，除了用baseline以外，其他都可以与下边框对齐)

其他文本样式

text-decoration 设置文本修饰可选值： none 什么都没有 underline 下划线 line-through 删除线（在文字中间） overline 上划线（可以设置线的颜色和样式，但ie不能显示）例： text-decoration: underline red dotted;

width-space 设置网页如何处理空白可选值： normal 正常（默认值） nowrap 不换行 pre 保留空白（保留在这里的空格）例：（一行文字显示不完有省略号，四个缺一不可） .box2{ width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

学习视频、笔记参考：https://www.bilibili.com/video/BV1XJ411X7Ud

【本文地址】

【前端】CSS基础

【前端】CSS基础

今日新闻

推荐新闻